<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>时光印记 - 智医科技</title>
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/css/bootstrap-icons.css" rel="stylesheet">
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      /* 修改背景样式，确保覆盖整个视口 */
      background: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #2b6cb0 100%) fixed;
      background-size: cover;
      font-family: "Microsoft YaHei", sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: fixed;
      top: 0;
      left: 0;
    }

    .container {
      position: relative;
      text-align: center;
      z-index: 1;
      padding: 20px;
      max-width: 100%;
      margin: 0 auto;
    }

    .title {
      color: white;
      font-size: clamp(2.5rem, 8vw, 4rem); /* 响应式字体大小 */
      font-weight: bold;
      margin-bottom: 2rem;
      text-shadow: 0 0 10px rgba(255,255,255,0.3);
      opacity: 0;
      transform: translateY(-20px);
      animation: fadeInDown 1s ease forwards;
    }

    .subtitle {
      color: rgba(255,255,255,0.8);
      font-size: clamp(1rem, 4vw, 1.5rem); /* 响应式字体大小 */
      margin-bottom: 3rem;
      opacity: 0;
      transform: translateY(-20px);
      animation: fadeInDown 1s ease 0.3s forwards;
      padding: 0 20px;
    }

    .start-btn {
      display: inline-block;
      padding: clamp(12px, 3vw, 15px) clamp(30px, 5vw, 40px);
      font-size: clamp(1rem, 3vw, 1.2rem);
      color: white;
      background: rgba(255,255,255,0.1);
      border: 2px solid rgba(255,255,255,0.2);
      border-radius: 30px;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      text-decoration: none;
      transition: all 0.3s ease;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 1s ease 0.6s forwards;
      cursor: pointer;
      width: 200px;
      margin: 0 auto;
    }

    .start-btn:hover {
      background: rgba(255,255,255,0.2);
      border-color: rgba(255,255,255,0.3);
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      color: white;
    }

    .particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .particle {
      position: absolute;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      pointer-events: none;
      animation: float 20s infinite linear;
    }

    @keyframes fadeInDown {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes float {
      0% {
        transform: translateY(0) rotate(0deg);
      }
      100% {
        transform: translateY(-100vh) rotate(360deg);
      }
    }

    .logo {
      width: clamp(60px, 10vw, 80px);
      height: clamp(60px, 10vw, 80px);
      margin-bottom: 2rem;
      opacity: 0;
      transform: scale(0.8);
      animation: fadeInScale 1s ease forwards;
    }

    @keyframes fadeInScale {
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .footer {
      position: fixed;
      bottom: 20px;
      left: 0;
      width: 100%;
      color: rgba(255,255,255,0.6);
      font-size: clamp(0.8rem, 2.5vw, 0.9rem);
      text-align: center;
      opacity: 0;
      animation: fadeInUp 1s ease 0.9s forwards;
      padding: 0 20px;
      z-index: 1;
    }

    /* 禁用页面滚动和回弹效果 */
    @media (max-width: 768px) {
      html, body {
        position: fixed;
        width: 100%;
        height: 100%;
        overflow: hidden;
        -webkit-overflow-scrolling: none;
      }
      
      .container {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-bottom: 60px; /* 为footer留出空间 */
      }
    }
  </style>
</head>
<body>
<!-- 背景粒子 -->
<div class="particles" id="particles"></div>

<div class="container">
  <!-- Logo -->
<!--  <img src="/images/logo.png" alt="智医科技" class="logo">-->

  <!-- 标题 -->
  <h1 class="title">时光印记</h1>
  <p class="subtitle">记录每一个值得铭记的瞬间</p>

  <!-- 开启按钮 -->
  <div th:onclick="|window.location.href='@{/reports/{reportUuid}(reportUuid=${report.reportUuid})}'|" class="start-btn">
    <i class="bi bi-arrow-right-circle me-2"></i>开启旅程
  </div>
</div>

<!-- 页脚 -->
<div class="footer">
   智医科技股份有限公司
</div>

<script>
  // 创建背景粒子
  function createParticles() {
    const container = document.getElementById('particles');
    // 根据设备性能调整粒子数量
    const particleCount = window.innerWidth <= 768 ? 30 : 50;

    for (let i = 0; i < particleCount; i++) {
      const particle = document.createElement('div');
      particle.className = 'particle';

      // 随机大小，移动端略小
      const size = window.innerWidth <= 768 ? 
        Math.random() * 10 + 3 : 
        Math.random() * 15 + 5;
      particle.style.width = `${size}px`;
      particle.style.height = `${size}px`;

      // 随机位置
      particle.style.left = `${Math.random() * 100}%`;
      particle.style.top = `${Math.random() * 100}%`;

      // 随机动画延迟
      particle.style.animationDelay = `${Math.random() * 20}s`;

      container.appendChild(particle);
    }
  }

  // 页面加载完成后创建粒子
  window.addEventListener('load', createParticles);

  // 禁用默认的触摸行为
  document.addEventListener('touchmove', function(e) {
    e.preventDefault();
  }, { passive: false });
</script>
</body>
</html>